<template>
	<view style="flex-direction: column; display: flex;">
		<view style="flex-direction: row; flex-wrap: nowrap; justify-content: space-between; height: auto; width: 100%;">
			<text style="margin-left: 20rpx; margin-top: 20rpx; font-size: 50rpx; line-height: 1.5em;">{{hotelinfo.name}}</text>
		</view>
		<view style="width: 100%; height: 300rpx; display: flex; flex-direction: column;justify-content: center; align-items: center;">
			<text style="line-height: 2.0em;">{{choosedate.startDate}}入住--{{choosedate.endDate}}离店</text>
			<text style="line-height: 2.0em;">{{userinfo.phone}}</text>
			<text style="line-height: 2.0em;">逾期失效</text>
		</view>
		<view>
			<text style="margin-left: 30rpx; line-height: 2.0em; font-size: 35rpx;">已预约房间</text>
		</view>
		<view v-for="data in hotelskus">
			<image :src="data.imageUrl" style="width: 100%; height: 350rpx;" mode="aspectFill"></image>
			<view style="flex-direction: row; flex-wrap: nowrap; width: 100%; justify-content: space-between; height: 200rpx; display: flex;">
				<view style="width: 50%; height: 200rpx; flex-direction: column; display: flex;">
					<text style="margin-left: 30rpx; line-height: 2.0em; margin-top: 30rpx;">{{data.title+'/'+data.maxNumber+"人"}}</text>
					<text style="margin-left: 30rpx;">{{data.price+"每晚"}}</text>
				</view>
				<view style="width: 50%; height: 200rpx; display: flex; justify-content: flex-end; align-items: center;">
					<text style="margin-right: 30rpx;">已预约</text>
				</view>
			</view>
		</view>
		<view>
			<text style="margin-left: 30rpx; line-height: 2.0em;">酒店位置</text>
			<view>
				<map style="width: 750rpx; height: 300rpx; :latitude='latitude'; :longitude='longitude'; :markers:'covers'"></map>
			</view>
		</view>
	</view>
</template>

<script>
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue';
	import config from '../../common/config.js';
	
	export default {
		data() {
			return {
				hotelinfo:{},
				hotelskus:[{}],
				skuid:"",
				covers:[{
					latitude: "",
					longitude: "",
					iconPath: ""
				}],
				latitude: 39.909,
				longitude: 116.39742,
				info: {
					lunar: true,
					range: true,
					insert: false,
					selected: []
				},
				choosedate: {
					startDate:"",
					endDate:""
				},
				userinfo: {
					
				}
			}
		},
		methods: {
			hotelskurequest() {
				uni.request({
					url: config.hosts+'hotel/skuinfo',
					method: 'POST',
					header:{
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						skuid : this.skuid
					},
					success: res => {
						this.hotelskus = [res.data];
					},
					fail: () => {},
					complete: () => {}
				});
			},
			clickChangeDate() {
				this.$refs.calendar.open()
			},
			confirm(e) {
				this.info.selected = e.range.data;
				console.log('confirm 返回:', this.info.selected)
			},
			monthSwitch(e) {
				console.log('monthSwitchs 返回:', e)
			}
		},
		onLoad(e) {
			try {
				const value = uni.getStorageSync('userinfo');
				if (value) {
					this.userinfo = JSON.parse(value);
				}
			} catch (e) {
				// error
			}
			var data = JSON.parse(e.data);
			this.hotelinfo=data.hotelinfo;
			this.skuid=data.skuid;
			this.latitude = Number(this.hotelinfo.latitude);
			this.longitude = Number(this.hotelinfo.longitude);
			this.covers = [
				{
					latitude: Number(this.latitude),
					longitude: Number(this.longitude),
					iconPath: "../../static/location.png"
				}
			]
			this.hotelskurequest();
			uni.setNavigationBarTitle({
				title:this.hotelinfo.name
			})
			const startDate = new Date(data.startDate);
			const endDate = new Date(data.endDate);
			this.choosedate.startDate = startDate.getMonth()+1+'月'+startDate.getDate()+'日';
			this.choosedate.endDate = endDate.getMonth()+1+'月'+endDate.getDate()+'日';
		}
	}
</script>

<style>

</style>
